<template>
  <div id="main-navbar">
    <!-- NAVBAR -->
    <nav class="navbar navbar-default navbar-dark navbar-fixed-top " role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
            <span class="sr-only">Toggle Navigation</span>
            <i class="fa fa-bars"></i>
          </button>
          <router-link class="navbar-brand navbar-logo" :to="{ name: 'home'}">
            <i class="iconfont icon-logo"></i>&nbsp;
            <span class="company-name">亿卓门户</span>
          </router-link>
          <!-- <a href="#" class="navbar-brand navbar-logo">
            <i class="iconfont icon-logo"></i>&nbsp;
            <span class="company-name">亿卓门户</span>
          </a> -->
        </div>
        <!-- MAIN NAVIGATION -->
        <div id="main-nav" class="navbar-collapse collapse navbar-mega-menu">
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown active">
              <router-link :to="{ name: 'home'}" class="dropdown-toggle" data-toggle="dropdown">首页
              </router-link>
            </li>
            <li v-if="category.type!==4" v-for="category in categoryList" :key="category.menuId" class="dropdown">
              <a v-if="category.newTab" :href="category.url" target="_blank" :class="category.icon!=null?`special-menu-item`:`dropdown-toggle`">
                <i v-if="category.icon!=null" :class="`fa ${category.icon}`">&nbsp;&nbsp;</i>{{category.name}}
              </a>
              <router-link v-if="!category.newTab && category.params!=null" :to="{ name: category.url, params: category.params }" :class="category.icon!=null?`special-menu-item`:`dropdown-toggle`" data-toggle="dropdown">
                <i v-if="category.icon!=null" :class="`fa ${category.icon}`">&nbsp;&nbsp;</i>{{category.name}}
              </router-link>
              <router-link v-else-if="!category.newTab && category.params==null" :to="{ name: category.url }" :class="category.icon!=null?`special-menu-item`:`dropdown-toggle`" data-toggle="dropdown">
                <i v-if="category.icon!=null" :class="`fa ${category.icon}`">&nbsp;&nbsp;</i>{{category.name}}
              </router-link>
              <ul v-for="subcategory in category.list" :key="subcategory.menuId" class="dropdown-menu" role="menu">
                <li>
                  <a v-if="subcategory.newTab" :href="subcategory.url" target="_blank" :class="subcategory.icon!=null?`special-menu-item`:`dropdown-toggle`">
                    <i v-if="subcategory.icon!=null" :class="`fa ${subcategory.icon}`">&nbsp;&nbsp;</i>{{subcategory.name}}
                  </a>
                  <router-link v-if="!subcategory.newTab && subcategory.params!=null" :to="{ name: subcategory.url, params: subcategory.params }" :class="subcategory.icon!=null?`special-menu-item`:`dropdown-toggle`" data-toggle="dropdown">
                    <i v-if="subcategory.icon!=null" :class="`fa ${subcategory.icon}`">&nbsp;&nbsp;</i>{{subcategory.name}}
                  </router-link>
                  <router-link v-else-if="!subcategory.newTab && subcategory.params==null" :to="{ subcategory: category.url }" :class="subcategory.icon!=null?`special-menu-item`:`dropdown-toggle`" data-toggle="dropdown">
                    <i v-if="subcategory.icon!=null" :class="`fa ${subcategory.icon}`">&nbsp;&nbsp;</i>{{subcategory.name}}
                  </router-link>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <!-- END MAIN NAVIGATION -->
      </div>
    </nav>
    <!-- END NAVBAR -->
  </div>
</template>

<script>
import { isURL } from "@/utils/validate";

export default {
  data() {
    return {
      categoryList: []
    };
  },
  created() {
    let categoryList = JSON.parse(
      sessionStorage.getItem("categoryList") || "[]"
    );
    categoryList = categoryList.map(category => {
      if (category.list != null) {
        category.list = category.list.map(subcategory => {
          if (subcategory.url == null) subcategory.url = "";
          if (isURL(subcategory.url)) {
            subcategory.newTab = true;
            return subcategory;
          }
          return {
            ...subcategory,
            url: subcategory.url.replace("/", "-")
          };
        });
      }
      if (category.url == null) category.url = "";
      if (isURL(category.url)) {
        category.newTab = true;
        return category;
      }
      return {
        ...category,
        url: category.url.replace("/", "-")
      };
    });
    this.categoryList = categoryList;
    console.log(this.categoryList);
  }
};
</script>

<style lang="less">
#main-navbar {
  .navbar-logo {
    padding: 0 1rem;
  }
  .iconfont.icon-logo {
    font-size: 3rem;
    line-height: 50px;
    color: #406da4;
    vertical-align: middle;
  }
  .company-name {
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
  }
}
</style>
